<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title>消息中心</title>
<script src="js/jquery.min.js" ></script>
<script src="js/common.js" ></script>
<!--消息 脚本-->
<link rel="stylesheet" href="css/amazeui.min.css">
<script src="js/amazeui.min.js"></script>
<!--消息 脚本-->
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<style>
html,body,.mui-content{ background-color:#fff; }
</style>

<style>
		a {text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);color: #646464;}
		.aui-list-cell {padding: 10px 15px;position: relative;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;}
		.aui-list-cells a {padding: 14px 15px 14px 4px;}
		.aui-list-cells .aui-list-cell-s {padding: 15px;}
		.aui-list-cell:before {content: " ";position: absolute;left: 0;bottom: 0;right: 0;height: 1px;border-bottom: 1px solid #D9D9D9;color: #D9D9D9;-webkit-transform-origin: 0 100%;transform-origin: 0 100%;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
		.aui-list-cell-fl {width: 30px;height: 30px;}
		.aui-list-cell-fl img {width: 100%;height: 100%;display: block;border: none;}
		.aui-list-cell-cn {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;padding-left: 10px;font-size: 12px;color: #666;}
		.aui-list-cells .aui-list-cell-cn {font-size: 14px;color: #666;}
		.aui-list-cell-fr:after {width: 18px;height: 18px;content: " ";display: inline-block;position: relative;top: -8px;top: 50%;margin-top: -10px;right: -5px;}
		.aui-list-cell-fr:after {background-image: url('');background-position: center;background-repeat: no-repeat;background-size: 18px;}
	</style>
</head>

<body>
<div id="indexVm" v-cloak>
  <header class="header mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">消息中心</h1>
    <div class="am-dropdown" data-am-dropdown>
      <span class="am-btn am-dropdown-toggle" data-am-dropdown-toggle><em class="header-notice-tips"></em></span>
      <ul class="am-dropdown-content">
        <li class="clearfix"><a href="message.html"><i><img src="images/header-notice.png"></i>消息<em v-bind:class="messagenum>0?'header-notice-tips fr':''"></em></a></li>
        <li><a href="index.html"><i><img src="images/header-home.png"></i>首页</a></li>
      </ul>
    </div>
  </header>
  <!--header-end-->

<div class="mui-content">
	<div class="aui-list-cells">
		<a href="messagelist.html?msgType=1" class="aui-list-cell aui-list-cell-s">
			<div class="aui-list-cell-fl"><img src="images/icon/tz-1.png"></div>
			<div class="aui-list-cell-cn">通知消息<em style="float: left;" v-bind:class="notifymessagenum>0?'header-notice-tips fr':''"></em></div>
			<div class="aui-list-cell-fr"></div>
		</a>
		<a href="messagelist.html?msgType=2" class="aui-list-cell aui-list-cell-s">
			<div class="aui-list-cell-fl"><img src="images/icon/tz-2.png"></div>
			<div class="aui-list-cell-cn">互动消息<em style="float: left;" v-bind:class="noteractmessagenum>0?'header-notice-tips fr':''"></em></div>
			<div class="aui-list-cell-fr"></div>
		</a>
		<a href="messagelist.html?msgType=3" class="aui-list-cell aui-list-cell-s">
			<div class="aui-list-cell-fl"><img src="images/icon/tz-3.png"></div>
			<div class="aui-list-cell-cn">交易消息<em style="float: left;" v-bind:class="businessmessagenum>0?'header-notice-tips fr':''"></em></div>
			<div class="aui-list-cell-fr"></div>
		</a>
	</div>
</div>
</div>
<!--container-end-->
<script src="js/mui.min.js"></script>
<script src="js/wxshop.js"></script>
<script src="js/vue.js"></script>
<script>
	var vm = new Vue({
		el: '#indexVm',
		data: {
			messagenum: "0",
			notifymessagenum: "0",
			noteractmessagenum: "0",
			businessmessagenum: "0",
		},
		created: function () {
			mui.ajax(wxshop.serverUrl+"/msg", {
				type: "post",
				data:{
					code:wxshop.getUrlParam("code")
				},
				dataType: "json",
				contentType : "application/json",
				success: function(data) {
					if(data.ret==0){
						mui.alert(data.msg);
					}
					if(data.ret==2){
						wxshop.getOpenId(data.appid);
					}		
					vm.messagenum=data.messagenum;
					vm.notifymessagenum=data.notifymessagenum;
					vm.noteractmessagenum=data.noteractmessagenum;
					vm.businessmessagenum=data.businessmessagenum;
				},
				error: function(xhr,type,errorThrown) {
					mui.alert("后台接口请求失败，请联系管理员！错误"+errorThrown);
				}
			});
		},
	});
</script>
</body>
</html>